<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../../css/flf_css/all.css">
		<link rel="stylesheet" href="../../css/flf_css/Department_list.css">
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="../../libs/layui/css/layui.css">

		<!-- 引入 layui.js -->

	</head>
	<body>
		<header class="header">
			<div class="container clear">
				<div class="header-left">部门列表</div>
				<div class="header-right">首页>部门列表</div>
			</div>
		</header>
		<div class=" clear">
			<div class="header-left">
				
			</div>
			<div class="header-right">
				<button type="button" class="layui-btn layui-bg-black">导出</button>
				<a a href="new_Department.html" type="button" class="layui-btn layui-bg-cyan">新增部门</a>
			</div>
		</div>
<div style="background-color: white;">
		<table id='idTest' class="layui-table" lay-filter="demo" lay-data="{size:'lg'}"></table>
</div>

		<script src="../../libs/layui/layui.js"></script>
		<script type="text/html" id="demo1" " lay-filter="test1">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script>
			layui.use('table', function() {
				var table = layui.table;
				table.render({
					elem: '#idTest',
					
					cols: [
						[ //表头
						
							{
								field: 'id',
								title: '部门名称',
								unresize: true,
								width: 110
							}, {
								field: 'username',
								title: '部门联系人',
								unresize: true,
								minWidth: 100
							}, 
							{
								field: 'tnumbar',
								title: '联系人电话',
								unresize: true,
								width: 360
							},{
								field: 'numbar',
								title: '部门人数',
								unresize: true,
								width: 120
							},
							{
								field: 'usertime',
								title: '创建时间',
								unresize: true,
								width: 100
							},

							 {
								title: '操作',
								templet: '#demo1',
								unresize: true,
								width: 300
							}
						]
					],
					 
					data:sessionStorage.getItem('key')?JSON.parse(sessionStorage.getItem('key')):[],
					  page: true
				})


				//监听表格复选框选择
				table.on('checkbox(demo)', function(obj) {
					console.log(obj)
				});
				//监听工具条
				table.on('tool(demo)', function(obj) {
					var data = obj.data;
					if (obj.event === 'detail') {
						layer.msg('ID：' + data.id + ' 的查看操作');
						
						window.location.href="news_Department .html?date="+data.date+'&detail=true';
					} else if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del();
							layer.close(index);
							console.log(obj.data.date)
							
							let csdata = sessionStorage.getItem('key')?[...JSON.parse(sessionStorage.getItem('key'))]:[]
							const EitdData = csdata.map((i, index, arr) => {
								if (i.date == obj.data.date) {
									arr.splice(index,1); 
						
								}
								return arr
							})
								
							sessionStorage.setItem('key', JSON.stringify(EitdData[0]))
							layer.msg('删除成功');
							
						});
					} else if (obj.event === 'edit') {
						//layer.alert('编辑行：<br>' + JSON.stringify(data))
						window.location.href="news_Department .html?date="+data.date;
            
                          
					}
				});

				var $ = layui.$,
					active = {
						getCheckData: function() { //获取选中数据
							var checkStatus = table.checkStatus('idTest'),
								data = checkStatus.data;
							layer.alert(JSON.stringify(data));
						},
						getCheckLength: function() { //获取选中数目
							var checkStatus = table.checkStatus('idTest'),
								data = checkStatus.data;
							layer.msg('选中了：' + data.length + ' 个');
						},
						isAll: function() { //验证是否全选
							var checkStatus = table.checkStatus('idTest');
							layer.msg(checkStatus.isAll ? '全选' : '未全选')
						}
					};

				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>

	</body>

</html>
